<template>
    <transition name="zoom" >
        <div class="inner-plane" :style="baseStyle" v-show="visual" @click="visual_ = false">
            <slot></slot>
        </div>
    </transition>
</template>

<script>
    export default {
        props:{
            w:{ //宽
                type:String,
                default:'96%'
            },
            h:{ //高
                type:String,
                default:'94%'
            },
            visual:{
                type:Boolean,
                default:false
            }
        },
        computed:{
            baseStyle(){
                return {
                    width:this.w,
                    height:this.h
                }
            }
        },
        data(){
            return {
                visual_:this.visual
            }
        },
        watch:{
            visual_(val){
                this.$emit('update:visual', val)
            },
            visual(val){
                if(val!==this.visual_){
                    this.visual_ = val
                }
            }
        }

    }
</script>

<style scoped lang="scss">
.inner-plane{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    background-color: rgba(242, 242, 242, 1);
    color:#333333;
    padding: 30px;
    border: 2px solid rgba(121, 121, 121, 1);
}
</style>